<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>小米商城</title>
	<style type="text/css">
		#head{
			width: 100%;
			height: 98px;
		}
		#head_mag{
			width: 1130px;
			height: 98px;
			margin: 0px auto;
		}
		#body_bg{
			width: 100%;
			height:588px;
			background:url("../img/bg.jpeg") no-repeat center 0;/*可修改*/
			background-size: 100%100%;
		}
		#the_tail_id{
			width: 565px;
			margin: 0px auto;
			margin-top: 80px;
		}
		#the_tail_id span{
			font-size: 13px;
			color: #757575;
		}
		#the_tail_id a{
			font-size: 13px;
			color: #757575;
		}
		#the_tail_id .fonts{
			margin-left: 10px;
			margin-right: 10px;
		}
		#floataa{
			background:#FFFFFF;
			width: 455px;
			height: 400px;
			z-index: 999;
			position:absolute;
			top: 150px;
			right: 50px;
		}
		#floataa_text{
			font-size:30px;
			color:#F56600;
			width: 120px;
			margin: 0px auto;
			margin-top:10px;
		}
		#floataa_input{
			margin-top: 20px;
		}
		#userid{
			width: 383px;
			height: 50px;
			margin-left: 25px;
			background: #FAFFBD;
			border: 2px solid #E0E0E0;
		}
		#pass{
			width: 383px;
			height: 50px;
			margin-left: 25px;
			margin-top: 20px;
			background: #FAFFBD;
			border: 2px solid #E0E0E0;
		}
		#sub{
			width: 388px;
			height: 50px;
			margin-left: 25px;
			margin-top: 20px;
			background: #FF6700;
			color: #FFFFFF;
			border:none;
		}
		#errortext{
			margin-left: 25px;
			margin-top: 10px;
			color: red;
		}
		#registered{
			font-size: 15px;
			color: #FF6700;
			margin-left:25px;
			cursor:pointer;
		}
		#div_registered{
			margin-top: 10px;
		}
		#div_registered span{
			font-size: 13px;
			color: #757575;
		}
		#zc{
			font-size: 15px;
			color: #757575;
			margin-left: 102px;
		}
		#wjmm{
			font-size: 15px;
			color: #757575;
		}
		#code{
			display:none;
			height: 55.5px;
			width: 113px;
			font-size: 12px;
			background: #FFFFFF;
			border: 2px solid #E0E0E0;
			border-left: 0px;
			margin-top: 20px;
		}
		#quyu{
			height: 52px;
			width: 100px;
			border: 2px solid #E0E0E0;
			left: 25px;
			top: 70px;
			position:absolute;
			border-right: 0px;
			display:none;
			text-align: center;
			line-height: 52px;
		}
	</style>
	<script type="text/javascript" src="../js/jquery-3.1.0.js"></script>
	<script type="text/javascript">
        $(function(){
            $("#registered").click(function() {
                $("#userid").css({"margin-left":"125px", "width":"303px"});
                $("#userid").attr("placeholder","  请输入手机号码");
                $("#quyu").css({"display":"inline"});
                $("#pass").css({"width":"290px"});
                $("#pass").attr("type", "text");
                $("#pass").attr("name","verification_code");
                $("#pass").attr("placeholder","  请输入验证码");
                $("#code").css({"display":"inline"});
                $("#sub").val("立即登录/注册");
            });
        });
        function codeButton(){
            var code = $("#code");
            code.attr("disabled","disabled");
            setTimeout(function(){
                code.css("opacity","0.8");
            },1000)
            var time = 60;
            var set=setInterval(function(){
                code.val("("+--time+")秒后重新获取");
            }, 1000);
            setTimeout(function(){
                code.attr("disabled",false).val("重新获取验证码");
                clearInterval(set);
            }, 60000);
        }
        $(function() {
            $("#code").click(function() {
                $.ajax({
                    type:"post",
                    url:"../Verification_code",
                    data:{"op":"SMSlogin","userid":$("#userid").val()}
                });
            });
        });
	</script>
</head>
<body>
<div>
	<div id="head">
		<div id="head_mag">
			<a>
				<img src="../img/mistore_logo.png">
			</a>
		</div>
	</div>
	<div id="body_bg">
		<div id="floataa">
			<div id=floataa_text>账号登录</div>
			<div id=floataa_input>
				<form action="../Logservlet?op=login" method="post" >
					<div id="quyu">+86</div>
					<input type="text" name="userid" id="userid" placeholder="    邮箱/手机号码/小米ID"><br />
					<input type="password" name="pass" id="pass" placeholder="    密码"><input type="button" class="btn" id="code" value="获取验证码" onclick="codeButton()"><br />
					<span id="errortext"></span><br />
					<input type="submit" value="登录" id="sub">
				</form>
				<div id="div_registered">
					<a id="registered" >手机短信登录/注册</a>
					<a id="zc" href="user_register.jsp">立即注册</a><span style="margin-left: 6px; margin-right: 6px; color: #757575;font-size: 15px;">|</span><a id="wjmm" href="Retrieve_password.jsp">忘记密码？</a>
				</div>
			</div>
		</div>
	</div>
	<div id="the_tail">
		<div id="the_tail_id">
			<a style="margin-left: 120px;">简体</a><span class="fonts">|</span><a>繁体</a><span class="fonts">|</span><a>English</a><span class="fonts">|</span><a>常见问题</a><span class="fonts">|</span><a>隐私政策</a>
			<br />
			<span>小米公司版权所有-京ICP备10046444-</span><a><img src="img/ghs.png">京公网安备11010802020124号-京ICP证110507号</a>
		</div>
	</div>
</div>
</body>
</html>